<template>
  <div>
    <app-header></app-header>
    <app-navbar></app-navbar>
    <app-main></app-main>
  </div>
</template>

<script>
import AppHeader from "./AppHeader";
import AppMain from "./AppMain";
import AppNavbar from "./AppNavbar";

export default {
  data() {
    return {};
  },

  components: { AppHeader, AppNavbar, AppMain },

  methods: {}
};
</script>

<style scoped>
/* 头部区域 */
.header {
  position: absolute;
  line-height: 65px;
  background-color: #409EFF;
  top: 0;
  left: 0;
  right: 0;
}
/* 导航栏 */
.navbar {
  position: absolute;
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  top: 65px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}
/* 内容区 */
.main {
  position: absolute;
  top: 65px;
  left: 200px;
  padding: 10px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
</style>